<script setup>
import { ref } from 'vue'
const props = defineProps({
  // 控制弹窗
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 弹窗标题
  title: {
    type: String,
    default: '新增',
  },
  // 弹窗宽度
  width: {
    type: String,
    default: '20%',
  },
  // 提交按钮 || 审核(同意、不同意) 加载 状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 取消弹窗文字
  closeText: {
    type: String,
    default: '取消',
  },
  // 普通提交按钮文字
  okText: {
    type: String,
    default: '保存',
  },
  // 审核按钮文字
  yesText: {
    type: String,
    default: '同意',
  },
  // 审核按钮文字
  noText: {
    type: String,
    default: '不同意',
  },
  // 是否审核按钮
  isEamine: {
    type: Boolean,
    default: false,
  },

  // 是否需要按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
})

//
const emit = defineEmits(['update:modelValue', 'close', 'ok'])

// 弹窗是否全屏
const fullscreen = ref(false)

// 保存按钮
const submit = (val) => {
  emit('ok', val)
}

// 取消按钮
const close = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>
<template>
  <!-- 弹窗 -->
  <el-dialog
    :modal="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :lock-scroll="false"
    draggable
    destroy-on-close
    :width="width"
    append-to-body
    :model-value="modelValue"
    :fullscreen="fullscreen"
    @close="close"
  >
    <template #title>
      <div class="title">{{ title }}</div>
    </template>
    <div class="line" />
    <slot name="body" class="dialog-body" />
    <slot class="dialog-body" />
    <template #footer v-if="title != '查看'">
      <slot name="footer" v-if="isBtn">
        <span class="dialog-footer">
          <!-- 审核专用 -->
          <template v-if="isEamine">
            <el-button type="danger" :loading="loading" @click="submit(2)">
              {{ noText }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="submit(1)">
              {{ yesText }}
            </el-button>
          </template>
          <!-- 普通按钮 -->
          <template v-else>
            <el-button type="primary" :loading="loading" @click="submit">
              {{ okText }}
            </el-button>
          </template>
          <el-button @click="close">{{ closeText }}</el-button>
        </span>
      </slot>
    </template>
    <div :class="title == '查看' ? 'footer' : 'footer'"></div>
  </el-dialog>
</template>
<style lang="scss" scoped>
// 空格线
.line {
  width: 100%;
  border-top: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
.title {
  text-align: center;
}
.dialog-footer {
  padding-bottom: 10px;
}
.dialog-body {
  padding-bottom: 20px;
}
.footer {
  height: 1.25rem;
}
</style>
